/**
 * Created by lipeng on 2019/5/5.
 */

new Vue({
  el: '#app',
  data: {
    msg: "Hello Word",
    devData: {},
    devCurrent: 0,
    devList: [
      {
        active: 1,
        time: '2009',
        title: "公司成立",
        titleEn: 'Company establishment',
        desc: "2009.1</br>九鸟科技有限公司成立</br></br>2009.2</br>公司员工超过50人</br></br>2009.6</br>公司客户超过200人"
      },
      {
        active: 0,
        time: '2010',
        title: "公司成立",
        titleEn: 'Company establishment',
        desc: "2009.2</br>九鸟科技有限公司成立</br></br>2009.2</br>公司员工超过50人</br></br>2009.6</br>公司客户超过200人"
      },
      {
        active: 0,
        time: '2011',
        title: "公司成立",
        titleEn: 'Company establishment',
        desc: "2009.3</br>九鸟科技有限公司成立</br></br>2009.2</br>公司员工超过50人</br></br>2009.6</br>公司客户超过200人"
      },
      {
        active: 0,
        time: '2009',
        title: "公司成立",
        titleEn: 'Company establishment',
        desc: "2009.4</br>九鸟科技有限公司成立</br></br>2009.2</br>公司员工超过50人</br></br>2009.6</br>公司客户超过200人"
      },
      {
        active: 0,
        time: '2009',
        title: "公司成立",
        titleEn: 'Company establishment',
        desc: "2009.5</br>九鸟科技有限公司成立</br></br>2009.2</br>公司员工超过50人</br></br>2009.6</br>公司客户超过200人"
      },
      {
        active: 0,
        time: '2009',
        title: "公司成立",
        titleEn: 'Company establishment',
        desc: "2009.6</br>九鸟科技有限公司成立</br></br>2009.2</br>公司员工超过50人</br></br>2009.6</br>公司客户超过200人"
      },
      {
        active: 0,
        time: '2009',
        title: "公司成立",
        titleEn: 'Company establishment',
        desc: "2009.7</br>九鸟科技有限公司成立</br></br>2009.2</br>公司员工超过50人</br></br>2009.6</br>公司客户超过200人"
      },
      {
        active: 0,
        time: '2009',
        title: "公司成立",
        titleEn: 'Company establishment',
        desc: "2009.8</br>九鸟科技有限公司成立</br></br>2009.2</br>公司员工超过50人</br></br>2009.6</br>公司客户超过200人"
      },
    ],
  },
  created: function () {

  },
  mounted: function () {
    this.devData = this.devList[0];
    // this.initSwiper();
  },
  methods: {
    devOver: function (index) {
      for (var i = 0; i < this.devList.length; i++) {
        this.devList[i].active = 0;
      }
      this.devList[index].active = 1;
      this.devCurrent = index;
      this.devData = this.devList[index];
    },
    changeItem: function (state) {
      if (state == 0) {
        if (this.devCurrent > 0) {
          this.devCurrent -= 1;
        }
      }
      if (state == 1) {
        if (this.devCurrent < this.devList.length) {
          this.devCurrent += 1;
        }
      }
      for (var i = 0; i < this.devList.length; i++) {
        this.devList[i].active = 0;
      }
      this.devList[this.devCurrent].active = 1;
      this.devData = this.devList[this.devCurrent];
    },
    initSwiper: function () {
      var self = this;
      var swiperWebapp = new Swiper('#orderWebapp', {
        slidesPerView: 3,
        spaceBetween: 0,
        loop: true,
        init: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
          renderBullet: function (index, className) {
            return '<span class="' + className + '">' + (index + 1) + '</span>';
          },
        },
        breakpoints: {
          1024: {
            slidesPerView: 3,
            spaceBetween: 0,
          },
          768: {
            slidesPerView: 1,
            spaceBetween: 0,
          },
        },
        on: {
          slideChangeTransitionEnd: function () {
            for (var i = 0; i < self.webappList.length; i++) {
              self.webappList[i].active = 0;
            }
            self.webappList[this.realIndex].active = 1;
            // console.log(this.realIndex)
          },
        },
      });

      var orderBuy = new Swiper('#orderBuy', {
        loop: true,
//    autoplay:true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
          renderBullet: function (index, className) {
            return '<span class="' + className + '">' + (index + 1) + '</span>';
          },
        },
      });

      var orderApp = new Swiper('#orderApp', {
        slidesPerView: 2,
        spaceBetween: 100,
        loop: true,
        // init: false,
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
          renderBullet: function (index, className) {
            return '<span class="' + className + '">' + (index + 1) + '</span>';
          },
        },
        breakpoints: {
          1024: {
            slidesPerView: 2,
            spaceBetween: 60,
          },
          768: {
            slidesPerView: 1,
            spaceBetween: 0,
          },
        },
        on: {
          slideChangeTransitionEnd: function () {
            for (var i = 0; i < self.appList.length; i++) {
              self.appList[i].active = 0;
            }
            self.appList[this.realIndex].active = 1;
          },
        },
      });
    },
  }
});